import Form from "@/components/Form";
import FormItem from "@/components/FormItem";
import Row from "@/components/Row";
import Col from "@/components/Col";
import DemoCode from "../../common/code";
import { anchorData, codes } from "./config";
import Space from "@/components/Space";
import Title from "@/components/Typography/Title";
import Card from "@/components/Card";
import Input from "@/components/FormElements/Input";
import Divider from "@/components/Divider";
import Text from "@/components/Typography/Text";
import Paragraph from "@/components/Typography/Paragraph";
import { reactive, ref, watchEffect } from "vue";
import Button from "@/components/Button";
import RadioGroup from "@/components/FormElements/RadioGroup";
import { FeatherMinus, FeatherPlus } from "cui-vue-icons/feather";

function FormPage () {
    const form1 = ref({
        u: '1',
        p: '2'
    });
    // const form = useForm({
    //     data: {
    //         count: 10,
    //         check: true,
    //         fruit: [],
    //         sex: 1,
    //         switch: true,
    //         age: 20,
    //         city: '1',
    //         cascader: [],
    //         time: '',
    //         timeRange: '',
    //         date: '',
    //         dateRange: '',
    //         month: '',
    //         monthRange: '',
    //         dateTime: '',
    //         dateTimeRange: '',
    //         slider: 0,
    //         tree: [],
    //         color: ''
    //     },
    //     validation: {
    //         count: {
    //             min: 5,
    //             max: 15,
    //             required: true,
    //         },
    //         city: {
    //             required: true
    //         }
    //     },
    //     message: {
    //         count: {
    //             max: '最大值不能超过15',
    //             required: '请输入值'
    //         },
    //         city: {
    //             required: '请选择地市'
    //         }
    //     }
    // });

    const form2 = ref({
        select: 1,
        value: ''
    });

    const cityData = [
        {value: '1', label: '北京'},
        {value: '2', label: '上海'},
        {value: '3', label: '杭州'},
        {value: '4', label: '武汉'},
        {value: '5', label: '天津'},
    ];

    const data3 = [];
    for (let i = 0; i < 3; i++) {
        const c = [];
        for (let j = 0; j < 3; j++) {
            c.push({id: `${i + 1}_${j + 1}`, title: `node_${i + 1}_${j + 1}`});
        }
        // patch: <div style={{
        //     display: 'flex',
        //     "justify-content": 'end'
        // }}>
        //     <Text type="success">查看</Text>
        // </div>

        data3.push({id: `${i + 1}`, title: `node_${i + 1}`, children: c});
    }

    const cascaderData = [
        {
            value: 'beijing', title: '北京',
            children: [
                {value: 'gugong', title: '故宫'},
                {value: 'tiantan', title: '天坛'},
                {value: 'wangfujing', title: '王府井'},
            ]
        },
        {
            value: 'jiangsu',
            title: '江苏',
            children: [
                {
                    value: 'nanjing',
                    title: '南京',
                    children: [
                        {
                            value: 'fuzimiao',
                            title: '夫子庙',
                        }
                    ]
                },
                {
                    value: 'suzhou',
                    title: '苏州',
                    children: [
                        {
                            value: 'zhuozhengyuan',
                            title: '拙政园',
                            disabled: true
                        },
                        {
                            value: 'shizilin',
                            title: '狮子林',
                        }
                    ]
                }
            ],
        }];

    watchEffect(() => {
        console.log(form1.value.u);
    });

    const form6 = ref({
        period: '',
        time: '',
        periodTime: ''
    });

    const form = ref();
    const form7 = ref({
        alerts: ''
    });
    const form8 = ref({
        alerts: []
    });
    const form9 = ref({
        alerts: [
            {name: '', rule: ''}
        ]
    });
    const formRef6 = ref();
    const form8Ref = ref();
    const form9Ref = ref();
    const showAlerts = ref(false);

    return <>
        <div class="sys-ctx-main-left">
            <Space dir="v" size={32}>
                <Title heading={2}>
                    Form 表单
                </Title>
                <Space id="form_base" dir="v">
                    <Card bordered>
                        <Form model={form1.value} ref={form} inline rules={{u: [{required: true, message: '请输入用户名'}]}}>
                            <FormItem name="u" label="用户名：">
                                <Input type="text" v-model={form1.value.u}/>
                            </FormItem>
                            <FormItem name="p" label="密码：">
                                <Input type="password"/>
                            </FormItem>
                        </Form>
                        <Button onClick={() => {
                            form.value.resetFields();
                        }}>重置</Button>
                        <Button onClick={() => {
                            form.value.clearValidate();
                        }}>清除验证</Button>
                        <Divider align="left"><Text type="primary">基础用法</Text></Divider>
                        <Paragraph type="secondary" spacing="extended">
                            设置属性 inline，表单元素可以水平排列。
                        </Paragraph>
                        <DemoCode data={codes['form_base']}/>
                    </Card>
                </Space>


                <Space id="form_dynamic_rule" dir="v">
                    <Card bordered>
                        <Form model={form2.value}>
                            <FormItem name="select" label="选项：">
                                <RadioGroup v-model={form2.value.select} data={[{label: '手机号验证', value: 1}, {label: '邮箱验证', value: 2}]}/>
                            </FormItem>
                            <FormItem name="value" label="校验值：" rules={form2.value.select === 1 ? [{required: true, message: '请输入手机号'},
                                {pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号'}
                            ] : [{required: true, message: '请输入邮箱'}, {type: 'email', message: '请输入正确的邮箱'}]}>
                                <Input type="text" v-model={form2.value.value}/>
                            </FormItem>
                        </Form>
                        <Divider align="left"><Text type="primary">动态校验</Text></Divider>
                        <Paragraph type="secondary" spacing="extended">
                        FormItem 组件支持动态设置 rules ,可根据不同条件对数据进行校验
                        </Paragraph>
                        <DemoCode data={codes['form_dynamic_rule']}/>
                    </Card>
                </Space>


                <Space id="form_dynamic_rule2" dir="v">
                    <Card bordered>
                        <Form model={form6.value} ref={formRef6} onChange={() => {
                            if (form6.value.period && form6.value.time) {
                                form6.value.periodTime = `${form6.value.period}-${form6.value.time}`;
                            } else {
                                form6.value.periodTime = '';
                            }
                            formRef6.value.validateFields(['periodTime']);
                        }}>
                            <FormItem name="periodTime" label="告警时间：" rules={[{required: true, message: '请输入告警时间'}]}>
                                <Space>
                                    <Input type="text" name="period" v-model={form6.value.period} />
                                    <Input type="text" name="time" v-model={form6.value.time}/>
                                </Space>
                            </FormItem>
                        </Form>
                        <Divider align="left"><Text type="primary">动态校验</Text></Divider>
                        <Paragraph type="secondary" spacing="extended">
                        FormItem 组件支持动态设置 rules ,可根据不同条件对数据进行校验
                        </Paragraph>
                        <DemoCode data={codes['form_dynamic_rule']}/>
                    </Card>
                </Space>


                <Space id="form_dynamic_rule3" dir="v">
                    <Card bordered>
                        <Form model={form7.value} onChange={(name, v) => {
                            console.log(name, v);
                        }}>
                            {
                                showAlerts.value ? <FormItem name="alerts" label="告警：">
                                    <Input v-model={form7.value.alerts}/>
                                </FormItem>
                                    : null
                            }
                        </Form>
                        <Button icon={showAlerts.value ? <FeatherMinus/> : <FeatherPlus/>} onClick={() => {
                            showAlerts.value = !showAlerts.value; // 动态显示告警
                        }}/>
                    </Card>
                </Space>


                <Space id="form_dynamic_rule3" dir="v">
                    <Card bordered>
                        <Form model={form8.value} ref={form8Ref} onChange={(name, v) => {
                            console.log(name, v, form8.value);
                        }}>
                            {
                                form8.value.alerts.map((item, index) => {
                                    return <FormItem name={`alerts.${index}`} label="告警：" rules={[{ required: true, message: '告警不能为空'}]}>
                                        <Input v-model={form8.value.alerts[index]}/>
                                    </FormItem>;
                                })
                            }
                        </Form>
                        <Space dir="v" inline>
                            <Button icon={<FeatherPlus/>} onClick={() => {
                                form8.value.alerts.push(''); // 动态显示告警
                            }}/>
                            <Button type="primary" onClick={async () => {
                                await form8Ref.value.validate();
                            }}>提交</Button>
                        </Space>
                    </Card>
                </Space>

                <Space id="form_dynamic_rule4" dir="v">
                    <Card bordered>
                        <Form model={form9.value} ref={form9Ref} onChange={(name, v) => {
                            console.log(name, v, form9);
                        }}>
                            {
                                form9.value.alerts.map((item, index) => {
                                    return <Space>
                                        <FormItem name={`alerts.${index}.name`} label="告警名称：" rules={[{ required: true, message: '告警名称不能为空'}]}>
                                            <Input v-model={form9.value.alerts[index].name}/>
                                        </FormItem>
                                        <FormItem name={`alerts.${index}.rule`} label="告警规则：" rules={[{ required: true, message: '告警规则不能为空'}]}>
                                            <Input v-model={form9.value.alerts[index].rule}/>
                                        </FormItem>
                                    </Space>;
                                })
                            }
                        </Form>
                        <Space dir="v" inline>
                            <Button icon={<FeatherPlus/>} onClick={() => {
                                form9.value.alerts.push({name: '', rule: ''}); // 动态显示告警
                            }}/>
                            <Button type="primary" onClick={async () => {
                                await form9Ref.value.validate();
                            }}>提交</Button>
                        </Space>
                    </Card>
                </Space>


                {/* <Space id="form_fields" dir="v">
                    <Card bordered>
                        <Form form={form} labelWidth={100} onChange={(name: string, v: any) => {
                            console.log(name, v);
                            console.log(form.getFormData());
                        }}>
                            <Row>
                                <Col grid={0.33}>
                                    <FormItem label='是否选择:' name='check'>
                                        <Space dir="h" align="baseline">
                                            <Checkbox label='是否选择'/>
                                            <Button onClick={() => {
                                                form.check = !form.check;
                                                console.log(form.getFormData());
                                            }}>改变</Button>
                                        </Space>
                                    </FormItem>
                                </Col>
                                <Col grid={0.33}>
                                    <FormItem label='水果:' name='fruit'>
                                        <Space dir="h" align="baseline">
                                            <Input type='checkbox' data={[{label: '苹果', value: '1'}, {label: '桃子', value: '2'}]}/>
                                            <Button onClick={() => {
                                                form.fruit = ['2'];
                                                console.log(form.getFormData());
                                            }}>改变</Button>
                                        </Space>
                                    </FormItem>
                                </Col>
                                <Col grid={0.33}>
                                    <FormItem label='性别:' name='sex'>
                                        <Space dir="h" align="baseline">
                                            <Input type='radio' data={[{label: '男', value: 1}, {label: '女', value: 2}]}/>
                                            <Button onClick={() => {
                                                form.sex = 2;
                                                console.log(form.getFormData());
                                            }}>改变</Button>
                                        </Space>
                                    </FormItem>
                                </Col>
                            </Row>

                            <Row>
                                <Col grid={0.33}>
                                    <FormItem label='开关：' name='switch'>
                                        <Space dir="h" align="center">
                                            <Input type='switch' />
                                            <Button onClick={() => {
                                                form.switch = !form.switch;
                                                console.log(form.getFormData());
                                            }}>改变</Button>
                                        </Space>
                                    </FormItem>
                                </Col>
                                <Col grid={0.33}>
                                    <FormItem label='阿萨德：' name='count'>
                                        <Space dir="h">
                                            <Input prefix='￥' suffix='元' use:aaa={['count']}/>
                                            <Button onClick={() => {
                                                form.count = parseInt(form.count) + 1;
                                                console.log(form.getFormData());
                                            }}>Add</Button>
                                        </Space>
                                    </FormItem>
                                </Col>
                                <Col grid={0.33}>
                                    <FormItem label='年龄：' name='age'>
                                        <Space dir="h" align="center">
                                            <Input type='spinner' />
                                            <Button onClick={() => {
                                                form.age = form.age + 1;
                                                console.log(form.getFormData());
                                            }}>改变</Button>
                                        </Space>
                                    </FormItem>
                                </Col>
                            </Row>

                            <Row>
                                <Col grid={0.33}>
                                    <FormItem label='地市：' name='city'>
                                        <Space dir="h" align="center">
                                            <Input type='select' data={cityData} clearable>
                                                <Option label="北京" value="1"></Option>
                                                <Option label="上海" value="2"></Option>
                                                <Option label="深圳" value="3"></Option>
                                            </Input>
                                            <Button onClick={() => {
                                                form.city = '2';
                                                console.log(form.getFormData());
                                            }}>改变</Button>
                                        </Space>
                                    </FormItem>
                                </Col>
                                <Col grid={0.33}>
                                    <FormItem label='景点：' name='cascader'>
                                        <Space dir="h" align="center">
                                            <Input type='cascader' data={cascaderData} />
                                            <Button onClick={() => {
                                                form.cascader = ['beijing','gugong'];
                                                console.log(form.getFormData());
                                            }}>改变</Button>
                                        </Space>
                                    </FormItem>
                                </Col>
                                <Col grid={0.33}>
                                    <FormItem label='时间：' name='time'>
                                        <Space dir="h" align="center">
                                            <Input type='time' />
                                            <Button onClick={() => {
                                                form.time = '10:10:10';
                                                console.log(form.getFormData());
                                            }}>改变</Button>
                                        </Space>
                                    </FormItem>
                                </Col>
                            </Row>
                            <Row>
                                <Col grid={0.33}>
                                    <FormItem label='时间区间：' name='timeRange'>
                                        <Space dir="h" align="center">
                                            <Input type='timeRange' />
                                            <Button onClick={() => {
                                                form.timeRange = ['10:10:10', '12:12:00'];
                                                console.log(form.getFormData());
                                            }}>改变</Button>
                                        </Space>
                                    </FormItem>
                                </Col>
                                <Col grid={0.33}>
                                    <FormItem label='日期：' name='date'>
                                        <Space dir="h" align="center">
                                            <Input type='date' />
                                            <Button onClick={() => {
                                                form.date = '2023-04-05';
                                                console.log(form.getFormData());
                                            }}>改变</Button>
                                        </Space>
                                    </FormItem>
                                </Col>
                                <Col grid={0.33}>
                                    <FormItem label='日期范围：' name='dateRange'>
                                        <Space dir="h" align="center">
                                            <Input type='dateRange' />
                                            <Button onClick={() => {
                                                form.dateRange = ['2023-04-05', '2023-04-08'];
                                                console.log(form.getFormData());
                                            }}>改变</Button>
                                        </Space>
                                    </FormItem>
                                </Col>
                            </Row>

                            <Row>
                                <Col grid={0.33}>
                                    <FormItem label='月份：' name='month'>
                                        <Space dir="h" align="center">
                                            <Input type='month' />
                                            <Button onClick={() => {
                                                form.month = '2023-04';
                                                console.log(form.getFormData());
                                            }}>改变</Button>
                                        </Space>
                                    </FormItem>
                                </Col>
                                <Col grid={0.33}>
                                    <FormItem label='月份范围：' name='monthRange'>
                                        <Space dir="h" align="center">
                                            <Input type='monthRange' />
                                            <Button onClick={() => {
                                                form.monthRange = [dayjs('2023-04').toDate(), dayjs('2023-08').toDate()];
                                                console.log(form.getFormData());
                                            }}>改变</Button>
                                        </Space>
                                    </FormItem>
                                </Col>
                                <Col grid={0.33}>
                                    <FormItem label='日期时间：' name='dateTime'>
                                        <Space dir="h" align="center">
                                            <Input type='dateTime' />
                                            <Button onClick={() => {
                                                form.dateTime = dayjs('2023-04-05 10:10:10').toDate();
                                                console.log(form.getFormData());
                                            }}>改变</Button>
                                        </Space>
                                    </FormItem>
                                </Col>
                            </Row>

                            <Row>
                                <Col grid={0.33}>
                                    <FormItem label='日期时间范围：' name='dateTimeRange'>
                                        <Space dir="h" align="center">
                                            <Input type='dateTimeRange' />
                                            <Button onClick={() => {
                                                form.dateTimeRange = [dayjs('2023-04-05 10:10:10').toDate(), dayjs('2023-04-08 12:10:10').toDate()];
                                                console.log(form.getFormData());
                                            }}>改变</Button>
                                        </Space>
                                    </FormItem>
                                </Col>
                                <Col grid={0.33}>
                                    <FormItem label='进度：' name='slider'>
                                        <Space dir="h" align="center">
                                            <Input type='slider' />
                                            <Button onClick={() => {
                                                form.slider = 30;
                                                console.log(form.getFormData());
                                            }}>改变</Button>
                                        </Space>
                                    </FormItem>
                                </Col>
                                <Col grid={0.33}>
                                    <FormItem label='地点：' name='tree'>
                                        <Space dir="h" align="center">
                                            <Input type='treeSelect' data={data3} multi/>
                                            <Button onClick={() => {
                                                form.tree = ['2_1'];
                                                console.log(form.getFormData());
                                            }}>改变</Button>
                                        </Space>
                                    </FormItem>
                                </Col>
                            </Row>
                            <Row>
                                <Col grid={0.33}>
                                    <FormItem label='颜色：' name='color'>
                                        <Space dir="h" align="center">
                                            <Input type='color' />
                                            <Button onClick={() => {
                                                form.color = '';
                                                console.log(form.getFormData());
                                            }}>改变</Button>
                                        </Space>
                                    </FormItem>
                                </Col>
                            </Row>
                            <Space dir="h">
                                <Button onClick={() => {
                                    form.setFormData({
                                        count: '',
                                        check: true,
                                        fruit: [],
                                        sex: 1,
                                        switch: true,
                                        age: 20,
                                        city: '1',
                                        cascader: [],
                                        time: '',
                                        timeRange: '',
                                        date: '',
                                        dateRange: '',
                                        month: '',
                                        monthRange: '',
                                        dateTime: '',
                                        dateTimeRange: '',
                                        slider: 0,
                                        tree: [],
                                        color: ''
                                    });
                                    form.clearValidates();
                                }}>重置</Button>

                                <Button onClick={() => {
                                    form.isValid();
                                }}>校验</Button>
                            </Space>
                        </Form>
                        <Divider align="left"><Text type="primary">支持的表单项</Text></Divider>
                        <Paragraph type="secondary" spacing='extended'>
                            form 支持 <Text code>Input</Text>、<Text code>Checkbox</Text>、<Text code>Radio</Text>、<Text code>Select</Text>
                            、<Text code>Search</Text>、<Text code>Textarea</Text>、<Text code>AutoComplete</Text>、<Text code>Cascader</Text>
                            、<Text code>Datepicker</Text>、<Text code>Timepicker</Text>、<Text code>Progress</Text>、<Text code>Rate</Text>
                            、<Text code>Slider</Text>、<Text code>Spinner</Text>、<Text code>Switch</Text>、<Text code>Transfer</Text>、<Text code>TreeSelect</Text>
                            、<Text code>Upload</Text><br/>
                            form绑定数据使用useForm创建对象并传递给From， useForm 包含 data validation 和 messages 参数，data 中的数据字段和FormItem的name对应
                        </Paragraph>
                        <DemoCode data={codes['form_fields']}/>
                    </Card>
                </Space> */}
            </Space>
        </div>

        {/* <CompAnchor data={anchorData}/> */}
    </>;
}

FormPage.displayName = 'FormPage';
export default FormPage;
